<template>
  <div style="">
    <div style="text-align: center;">
      <el-button  type="text" @click="dialogVisible = true;fetchproductionData(name,4)">查看产品型号</el-button>
    </div>
    <el-dialog class="dialogHeaderFont" :title="name +'各个型号销售情况'" :visible.sync="dialogVisible" width="100%">
      <div>
        <div class="itemTitle">
          <span>销售数据统计</span>
        </div>
        <div>
          <el-table :data="categoryLists" style="width: 100%" size="mini" :default-sort = "{prop: 'saleCount', order: 'descending'}">
            <el-table-column
              prop="productCode"
              width="100px"
              label="产品型号">
            </el-table-column>
            <el-table-column
              prop="category"
              width="120px"
              label="所属品类">
            </el-table-column>
            <el-table-column
              sortable
              width="135px"
              prop="saleAmount"
              :formatter="formatterMoney"
              label="销售额(万元)">
            </el-table-column>
            <el-table-column
              sortable
              width="135px"
              prop="saleCount"
              label="销售量(件)">
            </el-table-column>
            <el-table-column
              sortable
              width="135px"
              prop="averagePrice"
              label="销售均价(元)">
            </el-table-column>
            <el-table-column
              sortable
              prop="countCategoryRatio"
              :formatter="formatterSet"
              label="销量在品类占比">
            </el-table-column>
            <el-table-column
              sortable
              prop="countAllRatio"
              :formatter="formatterSet"
              label="销量在全产品占比">
            </el-table-column>
            <el-table-column
              sortable
              prop="amountCategoryRatio"
              :formatter="formatterSet"
              label="销额在品类占比">
            </el-table-column>
            <el-table-column
              sortable
              prop="amountAllRatio"
              :formatter="formatterSet"
              label="销额在全产品占比">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" class="buttonFont" @click="dialogVisibleChild = true;fetchData(scope.row.productCode, productionId, timeRange)">销售详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <el-dialog class="dialogHeaderFont" title="详细信息" :visible.sync="dialogVisibleChild" width="100%">
      <div>
        <div class="itemContainer">
          <div class="itemTitle">销售情况</div>
          <div :id="'saleDetailSummaryChart' + productionId" style="height: 300px"></div>
        </div>
        <div class="itemContainer" style="margin-bottom: 0">
          <div class="titleHeader space-between">
            <span style="font-weight: bold">销售渠道分布</span>
            <el-form :inline="true" class="demo-form-inline single-form-inline locationDetail pickerOption" size="small">
              <el-form-item label="地区">
                <el-select v-model="country" placeholder="选择地区" @change="channelSel(timeRange)">
                  <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="省份">
                <el-select v-model="province" placeholder="选择省份" @change="channelSel(timeRange)">
                  <el-option v-for="(item,index) in provinceList" :key="index" :label="item" :value="item" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市">
                <el-select v-model="city" placeholder="选择城市" @change="channelSel(timeRange)">
                  <el-option v-for="(item,index) in cityLists" :key="index" :label="item" :value="item" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="门店">
                <el-select v-model="shop" placeholder="选择门店" @change="channelSel(timeRange)">
                  <el-option v-for="(item,index) in shopLists" :key="index" :label="item" :value="item" ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div :id="'salePointChart' + productionId" style="height: 300px"></div>
        </div>
        <div v-if="shopIsAll" class="priceDetail">
          <div class="">
            <div class="itemTitle">
              <span>终端销售统计</span>
            </div>
            <el-table :data="priceTableData" style="width: 100%" size="mini">
              <el-table-column
                prop="shopName"
                label="门店名称">
              </el-table-column>
              <el-table-column
                sortable
                prop="amountCount"
                label="销售额(万元)">
              </el-table-column>
              <el-table-column
                sortable
                prop="salesCount"
                label="销售量(万件)">
              </el-table-column>
              <el-table-column
                prop="zhanBi"
                label="销量在全品类中占比">
              </el-table-column>
            </el-table>
          </div>
          <div class="">
            <div class="itemTitle">
              <span>渠道表现趋势</span>
            </div>
            <div :id="'salePriceChart' + productionId"  style="height: 300px"></div>
          </div>
        </div>
      </div>
    </el-dialog>
    </div>
</template>

<script>
  import * as opreate from 'api/getData'
  import mixins from 'utils/mixin'

  export default {
    mixins:[mixins.mixin],
    data() {
      return {
        dialogVisible: false,
        dialogVisibleChild: false,
        data: [],
        saleInfo: [],
        priceChartData: [],
        priceTableData: [],
        categoryLists:[],
        shopIsAll: true
      };
    },
    props: ['productionId','name', 'startDate', 'endDate', 'timeRange'],
    mounted(){
    },
    methods: {
      formatterSet(row,col,num){
        return Number.isNaN(Number(num)) ? '0.00%' : `${(num * 100).toFixed(2)}%`
      },
      formatterMoney(row,col,num){
        return Number.isNaN(Number(num)) ? '0.00' : `${(parseFloat(num) / 10000).toFixed(2)}`
      },
      fetchproductionData(channel,sort) {
        opreate.getCategoryList({ num: this.timeRange,channel,sort }).then(res =>{
          this.categoryLists = res.data || []
        })
      }
    },
    watch:{
      shop(newVal){
        if("全部" == newVal){
          this.priceTableData = []
          this.shopIsAll = true
        }else {
          this.shopIsAll = false
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  .itemContainer {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
  .itemTitle {
    background-color: #E8EEF4;
    height: 50px;
    padding: 5px 15px;
    line-height: 40px;
    font-weight: bold;

  }
  .priceDetail {
    display: flex;
    background-color: #fff;
    padding: 10px;
    > div {
      flex: 1;
      flex-basis: 50%;
      margin: 10px;
    }
  }
</style>
